<template>
  <div @click="clickFun">
    <ReChart
      :options="pieChart"
      :loop="true"
      style="width: 400px; height: 200px"
    />
    <ReChart
      :options="lineChart"
      :loop="true"
      style="width: 400px; height: 200px"
    />
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
    <h1>dadasdasd大师傅士大夫的是</h1>
  </div>
</template>
<script setup lang="ts">
import {
  onBeforeMount,
  onMounted,
  reactive,
  ref,
  onUnmounted,
  nextTick,
  onDeactivated,
  onActivated,
} from "vue";
import ReChart from "@/components/ReChart/index.vue";
import echarts from "@/plugins/echarts.js";
const emits = defineEmits([]);
const props = defineProps({});

const clickFun = () => {
  console.log(423, this);
};
// function clickFun() {
//   console.log(423, state, this);
// }
onBeforeMount(() => {});

const pieChart = ref({
  tooltip: {
    trigger: "item",
    confine: true,
  },
  grid: {
    top: 10,
    bottom: 30,
  },
  legend: false,
  series: [
    {
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "未开工" },
        { value: 735, name: "进行中" },
        { value: 580, name: "已完工" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
const lineChart = ref({
  grid: {
    top: "15%",
    left: "10%",
    right: "7%",
    bottom: "15%",
    // containLabel: true
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#57617B",
      },
    },
    backgroundColor: "rgba(0,0,0,0.3)",
    borderColor: "rgba(0,0,0,0.3)",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "rgba(242, 243, 245, 0.2)",
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "rgba(9, 131, 230, 1)",
          // padding: 16,
          fontSize: 12,
        },
        formatter: function (data) {
          return data;
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#192a44",
        },
      },
      axisTick: {
        show: false,
      },
      data: ["1", "2", "3", "5", "6"],
    },
  ],
  yAxis: [
    {
      min: 0,
      // y轴分割线
      splitLine: {
        show: true,
        lineStyle: {
          color: "#192a44",
        },
      },
      // y轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "#233653",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(179, 189, 205, 1)",
          padding: 5,
        },
      },
    },
  ],
  series: [
    {
      name: "人流量",
      type: "line",
      symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 8,
      smooth: true,
      lineStyle: {
        width: 2,
        color: "rgba(90, 208, 255, 1)", // 线条颜色
      },
      itemStyle: {
        color: "#fff",
        borderColor: "rgba(6, 58, 100, 1)",
        borderWidth: 4,
      },
      emphasis: {
        itemStyle: {
          borderColor: "rgba(9, 131, 230, 1)",
          borderWidth: 4,
        },
      },
      areaStyle: {
        //区域填充样式
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(30, 165, 255, 0.5)",
            },
            {
              offset: 1,
              color: "rgba(33, 66, 131, 0)",
            },
          ],
          false
        ),
        shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
        shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
      },
      data: [100, 200, 103, 109, 120],
    },
  ],
});
onMounted(() => {
  // initPieChart();
  setTimeout(() => {
    pieChart.value.series[0].data = [
      { value: 100, name: "未开工" },
      { value: 100, name: "进行中" },
      { value: 100, name: "已完工" },
    ];
    lineChart.value.series[0].data = [100, 100, 100, 100, 100];
  }, 1000);
});
onUnmounted(() => {});

onMounted(() => {});
defineExpose({});
</script>
<style lang="scss" scoped>
.chart {
  width: 400px;
  height: 200px;
}
</style>
